 <template>
	<view>
		
		<!--主体-->
		<view class="meMain">
			<view class="imageback"></view>
			<view class="mePosition">
				<view class="meMainBox">
					
					<!--头部-->
					<view class="meHead">
						<view class="meHeadAvatar"><image :src="avatar_url" mode="aspectFill"></image></view>
						<view class="meHeadName"><text>{{ name }}</text></view>
					</view>
					<!--头部-->
					
					<!--模板-->
					<!-- <view class="meOverBg">
						<view class="meVisitor">
							<view class="meVisitorLt">
								<view class="meVisitorTxt_02">0</view>
								<view class="meVisitorTxt_01">模板1</view>
							</view>
							<view class="meVisitorLt">
								<view class="meVisitorTxt_02">0</view>
								<view class="meVisitorTxt_01">模板2</view>
							</view>
						</view>
					</view> -->
					<!--模板-->
					
					<!--订单-->
					<view class="meOverBg uni-bold">
						<!-- <view class="meVisitorTitle">项目</view> -->
						<view class="meVisitor">
							<view class="meOrderLt" @click="gotoMyPublic">
								<view class="meOrderTxt_01">{{public_repos}}</view>
								<view class="meOrderTxt_02">Public</view>
							</view>
							<view class="meOrderLt" @click="gotoMyStar">
								<view class="meOrderTxt_01">{{stared}}</view>
								<view class="meOrderTxt_02">Stars</view>
							</view>
							<view class="meOrderLt" @click="gotoMyWatch">
								<view class="meOrderTxt_01">{{watched}}</view>
								<view class="meOrderTxt_02">Watches</view>
							</view>							
						</view>
					</view>
					<view class="meOverBg uni-bold">
						<view class="description"><text>简介 : {{bio ? bio : '暂无简介'}}</text></view>
					</view>
					<view class="meOverBg uni-bold">
						<view class="description"><text>加入时间 : {{timeToString(created_at)}}</text></view>
					</view>
					<!--其他-->
					<view class="meOverBg uni-bold">
						<view class="businessList">
							<view class="businessListTxt"><image src="../../static/dongtai_active.png"></image>他的动态</view>
							<view class="businessListYou"><image src="../../static/you.png"></image></view>
						</view>
						<view class="businessList" v-if="blog" @click.stop="gotoBlog">
							<view class="businessListTxt"><image src="../../static/blog_active.png"></image>他的博客</view>
							<view class="businessListYou"><text style="color: #50b7ea;">{{this.name}}</text><image src="../../static/you.png"></image></view>
						</view>
						<view class="businessList" v-if="weibo" @click.stop="gotoWeibo">
							<view class="businessListTxt"><image src="../../static/weibo_active.png"></image>他的微博</view>
							<view class="businessListYou"><text style="color: #50b7ea;">{{this.name}}</text><image src="../../static/you.png"></image></view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<!--主体-->
		
	</view>
</template>

<script>
	import {getOne } from '../../utils/api/user.js'
	export default{
		data(){
			return{
				avatarUrl:'../../static/avatar.png',//头像
				nickName:'点击登录',
				token:'',
				loginState:'',
				
				avatar_url : '../../static/avatar.png',
				followers : 0,
				following : 0,
				name : '',
				bio: '',
				
				public_repos : 0,
				public_gists : 0,
				stared : 0,
				watched : 0,
				
				created_at : '',
				
				weibo : '',
				blog : '',
				
				path :''
			}
		},
		onLoad(e) {
			uni.showLoading({
					
			})
			this.name = e.name ? e.name : 'sentsin'
			this.path = e.name ? e.name : 'sentsin'
			uni.setNavigationBarTitle({
				title: this.name
			})
			getOne(this.name).then(res => {
				uni.hideLoading()
				let data = res.data
				this.avatar_url = data.avatar_url
				if (data.name){
					this.name += ' ( ' + data.name + ' )'
				}
				this.bio = data.bio
				this.followers = data.followers
				this.following = data.following
				this.stared = data.stared
				this.watched = data.watched
				this.public_gists = data.public_gists
				this.public_repos = data.public_repos	
				this.created_at = data.created_at
				this.weibo = data.weibo
				this.blog = data.blog
			})
			
		},
		onShow() {
			
			this.token = uni.getStorageSync('token');
			
		},
		methods:{
			timeToString(utc){
				if(!utc){
					return '00'
				}
				if(!isNaN(utc)){
					return utc >= 10 ? utc : '0' + utc
				}
				let d = new Date(utc);
				let datetime=d.getFullYear() 
				+ '-' 
				+ this.timeToString(d.getMonth() + 1)
				+ '-' 
				+ this.timeToString(d.getDate())
				+ ' ' 
				+ this.timeToString(d.getHours())
				+ ':' 
				+ this.timeToString(d.getMinutes())
				+ ':' 
				+ this.timeToString(d.getSeconds());
				return datetime
			},
			gotoMyStar(){
				uni.navigateTo({
					url:"../mine/myStarRepo?name=" + this.path
				})
			},
			gotoMyRepos(){
				uni.navigateTo({
					url:"../mine/myOwnRepo?name=" + this.path
				})
			},
			gotoMyWatch(){
				uni.navigateTo({
					url:"../mine/myWatchRepo?name=" + this.path
				})
			},
			gotoMyPublic(){
				uni.navigateTo({
					url:"../mine/myPublicRepo?name=" + this.path
				})
			},
			gotoWeibo(){
				plus.runtime.openURL(this.weibo)
			},
			gotoBlog(){
				plus.runtime.openURL(this.blog)
			}
			
		}
	}
</script>

<style>
	page{ background: #F5F5F5; }
	.meMain{ width: 100%;position: relative; }
	.meMain .imageback{ width: 100%;height: 220upx;display: block; background-color: #50B7EA;}
	.meMainBox{ width: 92%;margin: 0 auto; }
	.mePosition{ position: absolute;top: 0;left: 0;width: 100%; }
	.meHead{ overflow: hidden;position: relative; }
	.meHeadAvatar{ float: left;width: 19%;margin-top: 10upx; }
	.meHeadAvatar image{ width: 110upx;height: 110upx;display: block;border-radius: 50%; }
	.meHeadName{ float: left;width: 81%;line-height: 120upx;color: #FFFFFF;font-size: 28upx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
	.description {font-size: 32rpx;padding:20rpx 20rpx 20rpx 20rpx;}
	.meOverBg{ background: #FFFFFF;overflow: hidden;border-radius: 12upx;margin-top: 30upx; }
	.meVisitor{ display: flex;flex-direction: row; }
	.meVisitorLt{ width: 50%;text-align: center;margin: 30upx 0; }
	.meVisitorLt:nth-child(1){ border-left: 1px #F5F5F5 solid;border-right: 1px #F5F5F5 solid; }
	.meVisitorTxt_01{ font-size: 28upx;color: #666666; }
	.meVisitorTxt_01 image{ width: 35upx;height: 35upx;vertical-align: middle;margin: 0 10upx 4upx 0; }
	.meVisitorTxt_02{ font-size: 30upx;color: #3B7ED5; }
	
	.meVisitorTitle{ font-size: 30upx;color: #333333;border-bottom: 1px #F5F5F5 solid;padding: 20upx 30upx; }
	.meOrderLt{ width: 33.33%;text-align: center;padding: 30upx 0;transition: all 0.4s; }
	.meOrderLt:active{ background: #E2E2E2; }
	.meOrderTxt_01{ color : #50B7EA  }
	.meOrderTxt_01 image{ width: 40upx;height: 40upx;display: block;margin: 0 auto 6upx; }
	.meOrderTxt_02{ font-size: 24upx;color: #666666; }
	
	.businessList{ overflow: hidden;padding: 30upx;border-bottom: 1px #F5F5F5 solid;transition: all 0.4s; }
	.businessList:active{ background: #E2E2E2; }
	.businessList:last-child{ border-bottom: none; }
	.businessListTxt{ float: left;font-size: 28upx;color: #333333; }
	.businessListTxt image{ width: 35upx;height: 35upx;vertical-align: middle;margin: 0 10upx 4upx 0; }
	.businessListYou{ float: right;font-size: 28upx;color: #333333; }
	.businessListYou image{ width: 20upx;height: 20upx;vertical-align: middle;margin: 0 0 4upx 10upx; }
	
	
</style>
